<template>
	<view class="flex">
		<text>小说</text>
		<view class="drawer">
			<uni-section title="右侧滑出" type="line">
				<view class="example-body">
					<view type="primary" class="anniu" @click="showDrawer('showRight')"><text class="word-btn-white">...</text>
					</view>
					<uni-drawer ref="showRight" mode="right" :mask-click="true" width=150 hight=200 @change="change($event,'showRight')">
						<view class="scroll-view">
							<!-- <scroll-view class="scroll-view-box" scroll-y="true">
								<view class="info-content" v-for="item in 100" :key="item">
									<text>可滚动内容 {{item}}</text>
								</view>
							</scroll-view> -->
						</view>
					</uni-drawer>
				</view>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		name:"shu",
		data() {
			return {
				showRight: false,
				showLeft: false
			};
		},
		methods:{
			confirm() {},
				// 打开窗口
				showDrawer(e) {
					this.$refs[e].open()
				},
				// 关闭窗口
				closeDrawer(e) {
					this.$refs[e].close()
				},
				// 抽屉状态发生变化触发
				change(e, type) {
					console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
					this[type] = e
				}
			},
			onNavigationBarButtonTap(e) {
				if (this.showLeft) {
					this.$refs.showLeft.close()
				} else {
					this.$refs.showLeft.open()
				}
			},
			// app端拦截返回事件 ，仅app端生效
			onBackPress() {
				if (this.showRight || this.showLeft) {
					this.$refs.showLeft.close()
					this.$refs.showRight.close()
					return true
				}
		}
	}
</script>

<style>
	.flex{
		width: 90%;
		height: auto;
		margin-top: 5px;
		margin-left: 5%;
	}
	.drawer{
		width: 20%;
		height: 100%;
		position: absolute;
		left: 89%;
	}
	.word-btn-white{
			color: #000;
			font-size: 24px;
		}
</style>